<template>
  <div>
    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item label="筛选查询">
      </el-form-item>
      <el-form-item label="  登记时间">
        <el-date-picker
            v-model="allBugInfosParam.startTime"
            type="datetime"
            placeholder="选择开始日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="~">g
        <el-date-picker
            v-model="allBugInfosParam.endTime"
            type="datetime"
            placeholder="选择结束日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="项目">
        <el-select v-model="allBugInfosParam.projectId"  placeholder="项目名称">
          <el-option  v-for="project in projects"  :key="project.projectId" :label="project.projectName" :value="project.projectId"  ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click.prevent="getData">查询</el-button>
      </el-form-item>
    </el-form>


    <div id="myChart" :style="{width: '600px', height: '600px'}"></div>
  </div>
</template>

<script>
export default {
  name: "severityDistribution",
  data(){
    return{
      allBugInfosParam:{
        startTime:null,
        endTime:null,
        projectId:null
      },
      datas:[],
      projects:[],
    }
  },
  created() {
    this.getData();
    this.getProject()
  },

  methods: {
    getProject(){
      this.$http.post("/project/findAllProject").then((resp) => {
        this.projects = resp.data.data.projects;
        console.log(resp.data.data)
      })
    },
    getData(){
      this.$http.post("/bugInfo/severityCount", this.allBugInfosParam).then((resp) => {
        if (resp.data.code==1010){
          this.datas=null;
        }else{
          this.datas = resp.data.data.statistics;
        }
        this.drawLine()
      })
    },
    drawLine() {
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      console.log(this.datas)

      myChart.setOption(
          {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: this.datas
              }
            ]
          }
      )

    }

  }
}
</script>

<style scoped>

</style>